@include('Layout.header')

<div class="page page-register">
    <div class="wrapper">
        <form action="" method="">
            <h3 class="head">用户注册</h3>
            <div class="items">
                <div class="item i1">如已有账号，请点此 <a href="/login">登录</a></div>
                <div class="item">
                    <input  class="username" autocomplete="new-password" id="username" name="username" type="text" placeholder="用户名(数字，字母2-20位字符)" />
                </div>
                <div class="item">
                    <input  class=""  name="qq" id="QQ" type="text" placeholder="请输入QQ号" />
                </div>
                <div class="item">
                    <input class="password"  id="pass" name="pass" type="password" placeholder="登录密码（数字，小写字母2-20位字符）" />
                </div>
                <div class="item">
                    <input class="" data-rule-equalTo="#pass" id="confirm-pass" type="password" placeholder="确认密码" name="confim">
                </div>
                <div class="item">
                    <input  class=" phone" id="phone" autocomplete="new-password"  name="phone" type="text" placeholder="请输入手机号" />
                </div>

                <div class="item i4">
                    <span style="border-radius: 1px;"> <img src="/validateCode" alt="" onclick="this.src='/validateCode?'+Math.random() ">  验证码</span>
                    <input class=" validateCode" autocomplete="new-password" id="validateCode" name="validateCode"  type="text" placeholder="请输入验证码" value="">
                    <p></p>
                </div>
                <div class="item i4">
                    <input class=" check" autocomplete="new-password" id="checkCode" name="check" type="text" placeholder="短信验证码" value="">
                    <span style="cursor:pointer;" id="send-code"  class="btn-send-code">发送短信验证码</span>
                    <p></p>
                </div>
                <input type="hidden" name="_token" id="token" value="{{ csrf_token()}}">
                <div class="item i5">
                    <input type="" onClick = "IsInteger()" id="submit" value="立即注册" />
                </div>
            </div>
        </form>
    </div>
</div>
</div>

@include('Layout.footer')

<script>




$(function(){
        $('#send-code').click(function(){
            if($('#validateCode').val() == '')
            {
                showtoastFromDocumentAJAX1();
            }else{
                $.ajax({
                    url: '/code?validateCode='+$('#validateCode').val()+'&mobile='+$('#phone').val(),
                    success: function(data)
                    {
                        if(data['code'] !=0)
                        {
                            showtoastFromDocumentAJAX();
                        }else{
                            if(data['msg'] != ''){
                                 showtoastFromDocumentAJAX();
                            }else{
                                showtoastFromDocumentMsg();
                            }

                        }
                    }
                });
            }
        });
        function showtoastFromDocumentAJAX(){
          showMessage('失败！',3000,true,'bounceInUp-hastrans','bounceOutDown-hastrans');
      }
       function showtoastFromDocumentAJAX1(){
                showMessage('验证码不能为空！',3000,true,'bounceInUp-hastrans','bounceOutDown-hastrans');
            }
        function showtoastFromDocumentMsg(){
              showMessage('验证码已发送！',3000,true,'bounceInUp-hastrans','bounceOutDown-hastrans');
        }
})





//判断输入的字符是否为a-zA-Z0-9
    function IsInteger()
    {
        var str1 = document.getElementById('username').value.trim();
        if(str1.length!=0){
            reg=/^[a-zA-Z0-9_]+$/;
        if(!reg.test(str1)){
                showtoastFromDocumentUsername();
            }else{
                var username = $('#username').val();
               if(username.length > 20 || username.length <3)
                  {
                      showtoastFromDocumentUsername();
                      return false;
                  }else{

                  }
            }
        }else{
              showtoastFromDocumentBug();
                         return false;  
         } 

        //判断输入的字符是否为:a-z,0-9
        var str2 = document.getElementById('pass').value.trim();
        if(str2.length!=0){
        reg=/^[a-z0-9_]+$/;
        if(!reg.test(str2)){
                 showtoastFromDocumentPass()
            }else{
                  var passowrd = $('#pass').val();
                  if(passowrd.length >20 || passowrd.length <3)
                     {
                         showtoastFromDocumentPass()
                         return false;
                     }else{

                     }
            }
        }else{
              showtoastFromDocumentBug();
                         return false;  
         } 


        //判断输入的字符是否为:手机号为 13/14/15/17/18开头
                var str3 = document.getElementById('phone').value.trim();
                if(str3.length!=0){
                reg=/^1[34578]\d{9}$/;
                if(!reg.test(str3)){
                    showtoastFromDocumentPhone();
                    return false;
                    }else{

                    }
                }else{
                      showtoastFromDocumentBug();
                                 return false;  
                 } 


         //判断输入的字符是否为:数字1-9  只能是4位数
                 var str4 = document.getElementById('checkCode').value.trim();
                 if(str4.length!=0){
                 reg=/^\d{4}$/;
                 if(!reg.test(str4)){
                        showtoastFromDocumentCheckCode();
                        return false;
                     }else{
                          
                    } 
                 }else{
                     showtoastFromDocumentBug();
                                return false;  
                } 
                 var str5 = document.getElementById('token').value.trim();
                 var str6 = document.getElementById('QQ').value.trim();

                 if(str1.length||str2.length||str3.length||str4.length  != 0){
                    var data = {
                         'username':str1,
                        'pass':str2,
                        'phone':str3,
                        'check':str4,
                        'qq':str6,
                        '_token':str5

                    }
                    $.ajax({
                      url: '/doregister',
                      type: "POST",
                      data: data,
                            success: function(data){
                                if(data['code'] !=0)
                              {
                                  if(data['code'] == -1){
                                        showtoastFromDocumentAJAX_1(data);
                                        return false;
                                  }else{
                                        showtoastFromDocumentAJAXs();
                                        return false;
                                  }
                              }else{
                                  self.location='login';
                              }
                          }
                    });
                 }
                 function showtoastFromDocumentUsername(){
                 	showMessage('非法用户名！',3000,true,'bounceInUp-hastrans','bounceOutDown-hastrans');
                 }
                 function showtoastFromDocumentPass(){
                    showMessage('非法密码！',3000,true,'bounceInUp-hastrans','bounceOutDown-hastrans');
                  }
                 function showtoastFromDocumentPhone(){
                    showMessage('手机格式不正确！',3000,true,'bounceInUp-hastrans','bounceOutDown-hastrans');
                  }
                 function showtoastFromDocumentCheckCode(){
                    showMessage('手机格式不正确！',3000,true,'bounceInUp-hastrans','bounceOutDown-hastrans');
                  }
                  function showtoastFromDocumentAJAX(){
                    showMessage('失败！',3000,true,'bounceInUp-hastrans','bounceOutDown-hastrans');
                }
                function showtoastFromDocumentBug(){
                    showMessage('内容不能为空！',3000,true,'bounceInUp-hastrans','bounceOutDown-hastrans');
                }
               function showtoastFromDocumentAJAXs(){
                  showMessage('用户名已存在！',3000,true,'bounceInUp-hastrans','bounceOutDown-hastrans');
              }
              function showtoastFromDocumentAJAX_1(data){
                    showMessage( data['msg'] ,3000,true,'bounceInUp-hastrans','bounceOutDown-hastrans');
                }

    }





</script>

